<template>
  <el-dialog
    width="80%"
    v-model="visible"
    @closed="onReset"
    append-to-body
    :title="dialogDatas.title"
    :before-close="onCancel"
  >
    <el-form style="height:480px;overflow: auto;" :model="dialogDatas" inline ref="formRef" class="px10" label-width="auto">
      <p class="mx1 mb10 font-bold text-base">基础信息</p>
      <el-col v-for="(item,index) in dialogDatas.dialogForBaseFormDatas" :key="item.label">
        <el-form-item :label="item.label" :prop="`dialogForBaseFormDatas.${index}.value`" :rules="[{ required: item.required, message: `${item.label}必填`, trigger: ['blur', 'change'] }]">
          <el-input
            v-if="item.type === 'input' && item.inType !=='number'"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
          />
          <el-input
            v-if="item.type === 'input' && item.inType ==='number'"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
            :type="item.inType"
            oninput="if(value.length>11)value=value.slice(0,11)"
          />
          <el-select
            v-if="item.type === 'select'"
            v-model="item.value"
            :multiple="item.Ttype==='multiple'"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
          >
            <el-option
              :label="option.name"
              :value="option.id"
              v-for="option in item.options()"
              :key="option.id"
            />
          </el-select>
          <el-radio-group v-model="item.value" v-if="item.type === 'radio'">
            <el-radio
              :label="radio.label"
              v-for="(radio, radioIndex) in item.options"
              :key="radioIndex"
              :disabled="isDisabled"
            />
          </el-radio-group>
          <el-input
            v-model="item.value"
            type="textarea"
            v-if="item.type === 'textarea'"
            :disabled="isDisabled"
          />
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="item.value"
            type="date"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
      <p class="mx1 mt6 mb10 font-bold text-base">辅助信息</p>
      <el-col v-for="item in dialogDatas.dialogForAssistantFormDatas" :key="item.label">
        <el-form-item :label="item.label">
          <el-input
            v-if="item.type === 'input'"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
            :maxlength="item.maxlength"
          />
          <el-select
            v-if="item.type === 'select'"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
          >
            <el-option
              :label="option.name"
              :value="option.id"
              v-for="option in item.options()"
              :key="option.id"
            />
          </el-select>
          <el-radio-group v-model="item.value" v-if="item.type === 'radio'" :disabled="isDisabled">
            <el-radio
              :label="radio.label"
              v-for="(radio, radioIndex) in item.options()"
              :key="radioIndex"
            >{{ radio.value }}</el-radio>
          </el-radio-group>
          <el-input
            v-model="item.value"
            type="textarea"
            v-if="item.type === 'textarea'"
            :disabled="isDisabled"
          />
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="item.value"
            type="date"
            :placeholder="item.placeholder"
            :disabled="isDisabled"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
    </el-form>

    <template #footer v-if="!isDisabled">
      <span class="flex justify-center">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm(formRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {  getCheckPointsOptionsRequest } from '@/api/common';
import { ref, reactive, computed, watch } from 'vue';
import type { FormInstance} from 'element-plus'
const emits = defineEmits(['onConfirm', 'handleFormValue', 'onCancel']);
let chanFormValue:any = reactive({});
const visible = ref(false);
const formRef = ref<FormInstance>();
  let checkPointsOptionsDatas = reactive({}); //归属检测点下拉数据
let checkPointsOptionsDatasForForm = reactive({}); //归属检测点下拉数据(数据筛选)
let dialogDatas = ref<any>({});
const init = async (data?: IRoleItem) => {
  // visible.value = true;
  if (data) {
    // await nextTick();
    // Object.assign(dialogDatas, data);
    chanFormValue = {}
    dialogDatas.value = data;
  }
};
const isDisabled = computed(() => (dialogDatas.value.type === 'check' ? true : false));
const onReset = () => {
  if (!formRef.value) return;
  // formRef.value.resetFields();
};
const onCancel = () => {
  //取消按钮事件
  onReset();
  visible.value = false;
  emits('onCancel');
};
const onConfirm = async (formEl: FormInstance | undefined) => {
  console.log(dialogDatas.value)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      onReset();
      emits('onConfirm', chanFormValue, dialogDatas.value.type,dialogDatas.value);
    } else {
      console.log('error submit!', fields)
    }
  })
  
};
const handleDialog=(value: boolean)=>{
  chanFormValue={}
  visible.value=value
}
watch(dialogDatas.value.dialogForBaseFormDatas, async (newVal, oldVal) => {
  /* 获取归属检测点数据 */
  // dialogForConfigDatas[2].value=''
  if (newVal.value) {
    const data: any = await getCheckPointsOptionsRequest({ orgId: newVal.value });
    checkPointsOptionsDatas = data.data;
    console.log(dialogDatas.value.dialogForBaseFormDatasm,"dialogDatas.value.dialogForBaseFormDatas")
    dialogDatas.value.dialogForBaseFormDatas.forEach(async (d) => {
    if(d.eName=='roleIds'){
      d.value=''
    } 
  });
  }
});
watch(()=>dialogDatas.value, () => {
  dialogDatas.value.dialogForBaseFormDatas.forEach(
    (d: { value: any[]; type: string; eName: string | number | any[] }) => {
      if (d.value || (d.value === false&&d.eName =='isHealthDoctor')) {
        if (d.type === 'cascader') {
          d.keys.forEach((item: string | number, i: number) => {
            chanFormValue[item] = d.value[i];
          });
          return;
        }
        chanFormValue[d.eName] = d.value;
      }
    }
  );
  dialogDatas.value.dialogForAssistantFormDatas.forEach(
    (d: { value: any[]; type: string; eName: string | number | any[] }) => {
      if (d.value) {
        if (d.type === 'cascader') {
          d.keys.forEach((item: string | number, i: number) => {
            chanFormValue[item] = d.value[i];
          });
          return;
        }
        chanFormValue[d.eName] = d.value;
      }
    }
  );
  emits('handleFormValue', chanFormValue);
},{deep:true});
defineExpose({ init,handleDialog });
</script>

<style lang="scss" scoped></style>
